<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <!-- 一般引入js文件，都是在 head 标签内部 -->
    <script src="js/jquery-3.5.1.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
    <button type="button" id="show">显示</button>
    <button type="button" id="hide">隐藏</button>
    <button type="button" id="showOrHide">显示/隐藏</button>
    <div>
        <ul id="goodList">
            <li>开水白菜</li>
            <li>蒸羊羔</li>
            <li>文昌鸡</li>
            <li>西湖醋鱼</li>
            <li>大盘鸡</li>
        </ul>
    </div>
    <script type="text/javascript">
        let e = $("#goodList") ;
        $(function(){
            $("#show").click(function(){
               // 显示
                e.slideDown( 3000 , function(){
                    console.log('显示出来了') ;
                }) ;
            }) ;

            $("#hide").click(function(){
                // 隐藏
                e.slideUp( 3000 , function(){
                    console.log('隐藏起来了') ;
                }) ;
            }) ;

            // 淡入/淡出
            $("#showOrHide").click(function(){
                e.slideToggle( 3000 , function(){
                    console.log('showOrHide 执行了') ;
                }) ;
            }) ;

        }) ;
    </script>

</body>
</html>